<template>
  <div class="menu-wrapper">
    <template v-for="item in menu">
      <el-menu-item
        v-if="validatenull(item[childrenKey]) && vaildRoles(item) && !item.isHide"
        :key="item[labelKey]"
        :index="item[pathKey]"
        :class="{'is-active':vaildAvtive(item)}"
        @click="open(item)"
      >
        <!-- <i :class="item[iconKey]"></i> -->
        <svg-icon class="svg-icon single" :icon-class="item.icon" />
        <span
          slot="title"
          :alt="item[pathKey]"
        >{{ generateTitle(item) }}</span>
      </el-menu-item>
      <el-submenu
        v-else-if="!validatenull(item[childrenKey])&&vaildRoles(item) && !item.isHide"
        :key="item[labelKey]"
        :index="item[pathKey]"
      >
        <template slot="title">
          <!-- <i :class="item[iconKey]"></i> -->
          <svg-icon class="svg-icon" :icon-class="item.icon" />
          <span
            slot="title"
            :class="{'el-menu--display':collapse && first}"
          >{{ generateTitle(item) }}</span>
        </template>
        <template v-for="(child,cindex) in item[childrenKey]">
          <el-menu-item
            v-if="validatenull(child[childrenKey]) && !child.isHide"
            :key="child[labelKey]"
            :index="child[pathKey]"
            :class="{'is-active':vaildAvtive(child)}"
            @click="open(child)"
          >
            <!-- <i :class="child[iconKey]"></i> -->
            <svg-icon class="svg-icon" :icon-class="child.icon" />
            <span slot="title">{{ generateTitle(child) }}</span>
          </el-menu-item>
          <el-submenu
            v-else
            :key="cindex"
            :index="cindex"
          >
            <template slot="title">
              <!-- <i :class="item[iconKey]"></i> -->
              <svg-icon class="svg-icon" :icon-class="item.icon" />
              <span
                slot="title"
                :class="{'el-menu--display':collapse && first}"
              >{{ generateTitle(child) }}</span>
            </template>
            <template v-for="items in child[childrenKey]">
              <el-menu-item
                v-if="validatenull(items[childrenKey]) && !child.isHide"
                :key="items[labelKey]"
                :index="items[pathKey]"
                :class="{'is-active':vaildAvtive(items)}"
                @click="open(items)"
              >
                <!-- <i :class="child[iconKey]"></i> -->
                <svg-icon class="svg-icon" :icon-class="items.icon" />
                <span slot="title">{{ generateTitle(items) }}</span>
              </el-menu-item>
            </template>
          </el-submenu>
        </template>
      </el-submenu>
    </template>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { validatenull } from '@/util/validate'
import config from './config.js'
export default {
  name: 'SidebarItem',
  props: {
    menu: {
      type: Array,
      default: undefined
    },
    screen: {
      type: Number,
      default: undefined
    },
    first: {
      type: Boolean,
      default: false
    },
    props: {
      type: Object,
      default: () => {
        return {}
      }
    },
    collapse: {
      type: Boolean
    }
  },
  data() {
    return {
      config: config,
      curTagValue: ''
    }
  },
  computed: {
    ...mapGetters(['roles']),
    labelKey() {
      return this.props.label || this.config.propsDefault.label
    },
    pathKey() {
      return this.props.path || this.config.propsDefault.path
    },
    iconKey() {
      return this.props.icon || this.config.propsDefault.icon
    },
    childrenKey() {
      return this.props.children || this.config.propsDefault.children
    },
    nowTagValue() {
      return this.$router.$avueRouter.getValue(this.$route)
    }
  },
  created() { },
  mounted() { },
  methods: {
    generateTitle(item) {
      return this.$router.$avueRouter.generateTitle(
        item[this.labelKey],
        (item.meta || {}).i18n
      )
    },
    vaildAvtive(item) {
      // console.log(this.menu)
      const groupFlag = (item['group'] || []).some(ele => {
        return this.$route.path.includes(ele)
      })
      if (this.nowTagValue === item[this.pathKey]) {
        this.curTagValue = item[this.pathKey]
        return true
      } else if (this.curTagValue === item[this.pathKey]) {
        return true
      } else {
        return false || groupFlag
      }
      // return this.nowTagValue === item[this.pathKey] || groupFlag;
    },
    vaildRoles(item) {
      item.meta = item.meta || {}
      return item.meta.roles ? item.meta.roles.includes(this.roles) : true
    },
    validatenull(val) {
      return validatenull(val)
    },
    open(item) {
      if (this.screen <= 1) this.$store.commit('SET_COLLAPSE')
      this.$router.$avueRouter.group = item.group
      this.$router.$avueRouter.meta = item.meta
      this.$router.push({
        path: this.$router.$avueRouter.getPath({
          name: item[this.labelKey],
          src: item[this.pathKey]
        }, item.meta),
        query: item.query
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .svg-icon{
    color:#BFBFBF;
    margin-right:10px;
  }
  .is-active .single{
    color:#409EFF;
  }
</style>

